<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" index=1></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // （1）element.属性
        console.log(div.id);
        // (2) element.gatAttribute('属性') attribute即为属性
        console.log(div.getAttribute('id'));
        // 区别：
        // element.属性 获取内置元素属性值（元素本身自带的属性）
        // element.getAttribute ('属性')；主要获得自定义的属性（标准）我们程序员自定义的属性

        // 2.设置元素属性值
        //  (1) element.属性 = '值'
        //  (2) element.setAttritube('属性'，'值')
        div.setAttribute('index',2);
        div.setAttribute('class','footer');

        // 3.移除属性 removeAttribute('属性')

    </script>
</body>

</html>